<template>
  <div class="mobile-home">
    <div class="mobile-home-list scrollbar">
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="listData.length > 0 ? '没有更多了' : ''"
        @load="initAjaxMethod"
      >
        <div class="list-cell" v-for="(item, index) in listData" :key="index">
          <div class="list-card">
            <!-- @click="jump(item, 6)" -->
            <van-cell-group >
              <van-field
                :border="false"
                label="模板名称"
                :value="item.name"
                readonly
              />
              <van-field
                :border="false"
                label="部位"
                :value="item.bodyPartName"
                readonly
              />
              <van-field
                :border="false"
                label="检查类型"
                :value="item.typeName"
                readonly
              />
            </van-cell-group>
            <div class="list-footer">
              <van-button type="info" size="small" round @click="jump(item, 1)"
                >编辑</van-button
              >
              <!-- <van-button type="info" size="small" round @click="jump(item, 2)">写报告</van-button>
              <van-button type="info" size="small" round @click="jump(item, 3)">分享</van-button> -->
              <!-- <van-button type="info" size="small" round @click="jump(item, 4)">复制</van-button> -->
              <van-button type="danger" size="small" round @click="jump(item, 5)">删除</van-button>
            </div>
          </div>
        </div>
      </van-list>
      <not-find v-if="listData.length == 0" />
    </div>
    <van-button round block type="info" @click="createMethod" style="margin-top:10px;">新增</van-button>
    <van-popup
      closeable
      v-model="dialog"
      position="bottom"
      :style="{ height: '60%' }"
    >
      <div style="margin-top: 12%">
        <van-form @submit="submitMethod">
          <van-cell-group inset>
            <van-field
              v-model="ruleForm.templateName"
              name="templateName"
              label="模板名称"
              required
              placeholder="模板名称"
              :rules="[{ required: true, message: '请填写模板名称' }]"
            />
            <van-field
              readonly
              clickable
              required
              name="bodyPartStr"
              :value="ruleForm.bodyPartStr"
              label="部位"
              placeholder="部位"
              :rules="[{ required: true, message: '请选择部位' }]"
              @click="bodyPartIdShow = true"
              right-icon="arrow-down"
            />
            <van-field
              readonly
              clickable
              required
              name="checkType"
              :value="ruleForm.checkType"
              label="检查类型"
              placeholder="检查类型"
              :rules="[{ required: true, message: '请选择检查类型' }]"
              @click="checkTypeShow = true"
              right-icon="arrow-down"
            />
            <van-field
              v-model="ruleForm.imageFinding"
              name="imageFinding"
              label="影像所见"
              type="textarea"
              rows="4"
              required
              placeholder="影像所见"
              :rules="[{ required: true, message: '请填写影像所见' }]"
            />
            <van-field
              v-model="ruleForm.diagnoseOpinion"
              name="diagnoseOpinion"
              label="诊断意见"
              type="textarea"
              rows="4"
              required
              placeholder="诊断意见"
              :rules="[{ required: true, message: '请填写诊断意见' }]"
            />
          </van-cell-group>
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit">
              提交
            </van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
    <van-popup v-model="checkTypeShow" position="bottom">
      <van-picker
        show-toolbar
        :columns="checktypelist"
        @confirm="onConfirm"
        @cancel="checkTypeShow = false"
        input-align="right" 
      />
    </van-popup>
    <van-popup v-model="bodyPartIdShow" position="bottom">
      <van-picker
        show-toolbar
        :columns="bodyPartDOList"
        @confirm="onConfirm1"
        @cancel="bodyPartIdShow = false"
        input-align="right"
      />
    </van-popup>
  </div>
</template>

<script>
import {
  Toast,
  Dialog,
  Tab,
  Tabs,
  ActionSheet,
  Tag,
  Button,
  Field,
  List,
  Cell,
  CellGroup,
  Form,
  Picker,
  Radio,
  RadioGroup,
  Popup,
} from "vant";
import notFind from "@/view/common/notFind";
import { getdate1 } from "@/utils/utils";
import _ from "lodash";
export default {
  components: {
    notFind,
    [Dialog.Component.name]: Dialog.Component,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [ActionSheet.name]: ActionSheet,
    [Tag.name]: Tag,
    [Button.name]: Button,
    [Field.name]: Field,
    [List.name]: List,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [Form.name]: Form,
    [Picker.name]: Picker,
    [Radio.name]: Radio,
    [RadioGroup.name]: RadioGroup,
    [Popup.name]: Popup,
  },
  filters: {
    formDate: (val) => {
      console.log(val);
      return getdate1(val);
    },
  },
  data: function () {
    return {
      active: 0,
      mobile: "",
      listData: [],
      bodyPartDOList: [],
      bodyPartDOListAll: [],
      checktypelistAll: [],
      checktypelist: [],
    
      dialog: false,
      loading: false,
      finished: true,
      isLoading: false,
      show: false,
      query: {
        pageNum: 1,
        pageSize: 10,
        status: 0,
      },
      checkTypeShow:false,
      bodyPartIdShow:false,
      ruleForm: {
        bodyPartId: "",
        templateName: "",
        checkType: "",
        checkTypeid: "",
        imageFinding: "",
        diagnoseOpinion: "",
      },
    };
  },
  mounted() {
    this.initAjaxMethod();
  },
  methods: {
    onConfirm(e, index) {     
     this.ruleForm.checkTypeid = this.checktypelistAll[index].dictValue;
     this.ruleForm.checkType = e;
     this.checkTypeShow = false;
      // console.log("ss",this.checktypelistAll,",index",index);
    },
    onConfirm1(e, index) {
      this.ruleForm.bodyPartId = this.bodyPartDOListAll[index].id;
      this.ruleForm.bodyPartStr = e;
      this.bodyPartIdShow = false;
    },
    onRefresh() {
      this.isLoading = true;
      this.resultMethod();
    },
    resultMethod() {
      this.query.pageNum = 1;
      this.listData = [];
      this.finished = false;
      this.loading = true;
      this.initAjaxMethod();
    },
    initAjaxMethod() {
      this.$http
        .get(this.$API.MOBILE_SELF_TEMPLATE_INDEXv2, this.query)
        .then((res) => {
          console.log("res", res); 
          if (res.code == 200) {
            let list = Array.isArray(res.rows) ? res.rows : [];
            let isOver = list.length < this.query.pageSize ? true : false;
            console.log("sdf",isOver,"pagen",list.length,'total',res.total);
            this.finished = isOver;
            this.loading = false;
            this.isLoading = false;
            this.listData = [...this.listData, ...list];
            this.total = res.total;
            if (!isOver) {
              this.query.pageNum++;
            }
          } else {
            this.loading = false;
            this.finished = true;
            this.isLoading = false;
          }
        });
    },
 
    async jump(data, flag) {
      console.log(data);
      if (flag == 1) {
        // 部位
        let reqonse = await this.getType();
        let reqonsecheck = await this.getcheckType();
    
        let bodyPartDOList =
          reqonse && Array.isArray(reqonse)
            ? reqonse
            : [];
        this.bodyPartDOList = bodyPartDOList.map((item) => item.name);
        this.bodyPartDOListAll = bodyPartDOList;
        // (reqonse.checktypelist)
        // 检查类型
        let checktypelist =
          reqonsecheck && Array.isArray(reqonsecheck)
            ? reqonsecheck
            : [];

        this.checktypelist = checktypelist.map((item) => item.dictLabel);
       this.checktypelistAll = checktypelist;
        console.log(this.checktypelist);
        this.ruleForm = {
          bodyPartId: data.bodyPartId,
           bodyPartStr: data.bodyPartName,
          templateName: data.name,
          checkType: data.typeName,
          checkTypeid: data.type,
          imageFinding: data.imageView,
          diagnoseOpinion: data.opinion,
         
        };
        this.dialog = true;
        this.id = data.id;
      } else if (flag == 2) {
        this.$router.push({
          path: "/mobile/admin/write",
          query: { id: data.id },
        });
      } else if (flag == 3) {
        this.show = true;
      } else if (flag == 4) {
      } else if (flag == 5) {

         this.ruleForm = {
          bodyPartId: data.bodyPartId,
        };
     
        this.id = data.id; 
        Dialog.confirm({
          title: "删除提示",
          message: "是否继续此操作？",
        })
          .then(() => {
  
           const url = this.id ? this.$API.MOBILE_SELF_TEMPLATE_DELv2 : this.$API.MOBILE_SELF_TEMPLATE_DELv2;
            if (this.id) this.ruleForm.ids = this.id;
            let para={id:this.id};
            //let url2='http://192.168.3.148:8080/system/template/1';
            // let url2="system/template/"+this.id;
            let url2=url+"/"+this.id;
            console.log(url2);
            // post
            this.$http
              .delete(url2, para)
              .then((res) => {
                // console.log("公海列表", res);
                if (res.code == 200) {
                  Toast.success("操作成功");
                  // if (!this.id) this.query.pageNum = 1;
                  // this.dialog = false;
                    this.isLoading = true;
                    this.resultMethod();
                } else {
                  Toast.fail(res.msg);
                }
                Toast.clear();
              })
              .catch((err) => {
                Toast.clear();
                Toast.fail(err.msg);
              });




            // on confirm
          })
          .catch(() => {});
      } else if (flag == 6) {
        this.$router.push({
          path: "/mobile/admin/detail",
          query: { id: data.id },
        });
      }
    },
    async createMethod() {
    // 部位
        let reqonse = await this.getType();
        let reqonsecheck = await this.getcheckType();
    
        let bodyPartDOList =
          reqonse && Array.isArray(reqonse)
            ? reqonse
            : [];
        this.bodyPartDOList = bodyPartDOList.map((item) => item.name);
        this.bodyPartDOListAll = bodyPartDOList;
        // (reqonse.checktypelist)
        // 检查类型
        let checktypelist =
          reqonsecheck && Array.isArray(reqonsecheck)
            ? reqonsecheck
            : [];

        this.checktypelist = checktypelist.map((item) => item.dictLabel);
       this.checktypelistAll = checktypelist;
      this.ruleForm = {
        body_Part_id: "",
        templateName: "",
        checkType: "",
        mageFinding: "",
        diagnoseOpinion: "",
      };
      this.dialog = true;
      this.id = null;
      this.dialogTitle = "新增";
    },
    async getType() {
      return this.$http.get(this.$API.SELFTEMP_TYPEv2).then((res) => res.data);
    },
   async getcheckType() {
      return this.$http.get(this.$API.SELFTEMP_checkTYPEv2).then((res) => res.data);
    },

    
    submitMethod() {
      Toast.loading({ message: "加载中...", forbidClick: true });
      const url = this.id ? this.$API.MOBILE_SELF_TEMPLATE_EDITv2 : this.$API.MOBILE_SELF_TEMPLATE_ADDv2;
     
     
     let ruleFormv2 = {       
        bodyPartId:this.ruleForm.bodyPartId,
        name:this.ruleForm.templateName,
        type:this.ruleForm.checkTypeid,
        imageView :this.ruleForm.imageFinding,
        opinion:this.ruleForm.diagnoseOpinion,
      };


     if (this.id)      
      {
       ruleFormv2.id = this.id;
       this.ruleForm.id = this.id;

         // post
      this.$http
        .put(url, ruleFormv2)
        .then((res) => {
         
          if (res.code == 200) {
            Toast.success("操作成功");
            // if (!this.id) this.query.pageNum = 1;
            this.dialog = false;
            this.resultMethod();
            // this.initAjaxMethod();
          } else {
            Toast.fail(res.msg);
          }
          Toast.clear();
        })
        .catch((err) => {
          Toast.clear();
          Toast.fail(err.msg);
        });


      }else{
 
      this.$http
        .post(url, ruleFormv2)
        .then((res) => {
         
          if (res.code == 200) {
            Toast.success("操作成功");
            if (!this.id) this.query.pageNum = 1;
            this.dialog = false;
            this.initAjaxMethod();
          } else {
            Toast.fail(res.msg);
          }
          Toast.clear();
        })
        .catch((err) => {
          Toast.clear();
          Toast.fail(err.msg);
        });


        
      }
      
 
    },
  },
};
</script>
<style lang="less" scoped>
.mobile-home {
  height: 100%;

  .mobile-home-list {
    height: calc(100vh - 110px);
  }

  .list-cell {
    padding: 0 16px;
  }

  .list-card {
    background: #ffffff;
    box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 10px;
    margin-top: 16px;
  }

  .list-header {
    padding: 8px 0;
    display: flex;
    align-items: center;
  }

  .list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
  }
  .qrcode-group {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 200px;
      height: 200px;
    }
  }
}
</style>
<style>
.mobile-home .list-footer .van-button {
  width: 70px;
}
</style>
